<template>
    <div class="admin">
        <el-card class="!border-none" shadow="never">
            <el-form class="mb-[-16px]" :model="formData" inline>
                <el-form-item label="物料信息">
                    <el-input v-model="formData.title" @keyup.enter="resetPage" class="w-40" size="small" clearable placeholder="请输入物料信息"/>
                </el-form-item>
                <el-form-item label="使用仓库">
                    <el-select class="w-40" v-model="formData.warehouse_id" @keyup.enter="resetPage" multiple size="small"
                        clearable>
                        <el-option v-for="(item, index) in options.listColumn" :key="index" :label="item.title"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="分类">
                    <el-tree-select class="w-40" @keyup.enter="resetPage" :check-strictly="true" default-expand-all
                        v-model="formData.cate_id" :data="options.jczq" :props="{ value: 'id', label: 'name' }" size="small"
                        clearable multiple>
                    </el-tree-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="resetPage()" size="small">查询</el-button>
                    <el-button @click="resetParams" size="small">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card v-loading="pager.loading" class="mt-2 !border-none" shadow="never">
            <!-- <el-button v-if="options.useJurisdiction" v-perms="['order.order/add']" type="primary" @click="handleAdd"
				size="small">
				<template #icon>
					<icon name="el-icon-Plus" />
				</template>
				新增入库单
			</el-button> -->
            <div>
                <mtable :data="pager.lists" :type="typeTable" :list="options.tableTile" :operation="true"
                    :tableheight="tableheight" @oncelldblclick="oncelldblclick" @handleAdds="handleAdds" :bill="false">
                    <template #tool="{ item }">
                        <el-table-column v-if="item.display == 1" sortable :label="item.name" show-overflow-tooltip
                            :prop="item.value" :width="item.width">
                            <template #default="{ row }">
                                <div v-if="item.name == '计量单位' && row.category_id == 15">
                                    {{ row.unit_name_15 }}
                                </div>
                                <div v-if="item.name == '计量单位' && row.category_id !== 15">
                                    <span>
                                        {{ row.unit_name }}
                                    </span>
                                </div>
                                <div v-if="item.name == '累计使用数量' && row.category_id == 15">
                                    <span> {{ row.quantity }}{{ row.unit_name_15 }} </span>
                                </div>
                                <div v-if="item.name == '累计使用数量' && row.category_id !== 15">
                                    <span> {{ row.quantity }}{{ row.unit_name }} </span>
                                </div>
                                <template v-if="item.name == '名称'">
                                    <el-button @click="onHovertitle(row)" size="small">{{
                                        row.title
                                    }}</el-button>
                                </template>
                                <div v-if="(tableShowbut == row.index) & (item.name == '总价（元）')
                                        ">
                                    <p v-if="MouseShow">{{ row.total_price }}</p>
                                    <el-input v-else v-model="row.total_price" clearable @blur="inputBlur(row)" size="small"
                                        @click.stop="onfocus" />
                                </div>
                                <div v-if="(tableShowbut == row.index) & (item.name == '总重（千克）')
                                    ">
                                    <p v-if="MouseShow">{{ row.total_price }}</p>
                                    <el-input v-else v-model="row.cargo_weight" clearable @blur="inputBlur(row)"
                                        size="small" @click.stop="onfocus" />
                                </div>
                                <div v-if="item.name == '从属设备'">
                                    <butstyle @onHovertitles="onHovertitles" :row="row"></butstyle>
                                </div>
                                <!-- 分类解析 -->
                                <div v-if="item.name == '分类'">
                                    <span v-for="(item, index) in row.cate_name" :key="index">
                                        <span v-if="row.category_id == item.id">{{ item.name }}</span>
                                    </span>
                                </div>
                                <div v-if="item.name=='型号'">
         <span>{{row.model}}</span>
        </div>
                <div v-if="item.name=='存储仓库'">
         <span>{{row.warehouse_name}}</span>
        </div>
                            </template>
                        </el-table-column>
                    </template>
                    <template #operation="{ row }">
                        <el-button type="primary" link @click="handleSee(row)">
                            查看
                        </el-button>
                    </template>
                </mtable>
            </div>
            <div class="flex justify-end">
                <pagination v-model="pager" @change="getLists" />
            </div>
        </el-card>

        <edit-popup v-if="showEdit" ref="editRef" @success="getLists" @close="showEdit = false" />
        <EdittablePopup v-if="showTable" ref="editRefs" :type="typeTable" @success="getLists" @close="onclo">
        </EdittablePopup>
        <see-popup v-if="showsee" ref="showseeRef" @success="getLists" @close="showsee = false" />
        <tableHovertitle v-if="Hovertitle" ref="HovertitleRef" @success="getLists" @close="Hovertitle = false">
        </tableHovertitle>
        <tableHover v-if="Hovertitles" :showImage="true" ref="HovertitleRefs" @success="getLists"
            @close="Hovertitles = false">
        </tableHover>
    </div>
</template>

<script lang="ts" setup>
import {
    admincheckActionPermissions,
    adminInventoryedit,
} from "@/api/inventory/list";
import { inventoryHistoryList } from "@/api/inventoryHistory/list";
import { adminUserBind } from "@/api/warehouse/list";
import { adminListssmaterials } from "@/api/materials/list";
import { usePaging } from "@/hooks/usePaging";
import EditPopup from "./edit.vue";
import seePopup from "./water.vue";
import EdittablePopup from "@/components/settable/index.vue";
import mtable from "@/components/table/index.vue";
import butstyle from "@/components/butstyle.vue";
import tableHover from "@/components/table-hovers/index.vue";
import tableHovertitle from "@/components/table-history/index.vue";
import useAppStore from "@/stores/modules/inventory";
import { getCommonFieldDisplay } from "@/api/tools/code";
const route = useRoute();
const pathing = ref(route.query);
const typeTable = ref("inventory_history");
const MouseShow = computed(() => userStore.MouseShow);
const userStore = useAppStore();
const HovertitleRef = shallowRef<InstanceType<typeof EditPopup>>();
const HovertitleRefs = shallowRef<InstanceType<typeof EditPopup>>();
const editRef = shallowRef<InstanceType<typeof EditPopup>>();
const editRefs = shallowRef<InstanceType<typeof EdittablePopup>>();
const showseeRef = shallowRef<InstanceType<typeof seePopup>>();
const showsee = ref(false);
const Hovertitle = ref(false);
const Hovertitles = ref(false);
const span = ref(12);
// 表单数据
const formData = reactive({
    warehouse_id: [],
    title: "",
    cate_id: [],
});

const tableShowbut = ref(null);
const showEdit = ref(false);
const showTable = ref(false);
const options = reactive({
    listColumn: [] as any[],
    jczq: [] as any[],
    tableTile: [] as any[],
    useJurisdiction: "",
});
const onHovertitle = async (data: any) => {
    Hovertitle.value = true;
    await nextTick();
    HovertitleRef.value?.open("edit");
    HovertitleRef.value?.setFormData(data, "inventoryHistory");
};
const onHovertitles = async (data: any) => {
    Hovertitles.value = true;
    await nextTick();
    HovertitleRefs.value?.open("edit");
    HovertitleRefs.value?.setFormData(data);
};

const oncelldblclick = (row: any) => {
    userStore.onMouseShow(false);
    tableShowbut.value = row.index;
};
const hovershow = ref(false);
const onHover = () => {
    hovershow.value = true;
};
const { pager, getLists, resetParams, resetPage } = usePaging({
    fetchFun: inventoryHistoryList,
    params: formData,
});
// watch(() => pager.lists, (newValue, oldValue) => {
// 	for (let i = 0; i < newValue.length; i++) {
// 		for (let j = 0; j < newValue[i].cate_name.length; j++) {
// 			if (newValue[i].cate_name[j].id == newValue[i].category_id) {
// 				newValue[i].cate_names = newValue[i].cate_name[j].name
// 			}
// 		}
// 	}
// }, {
// 	deep: true
// })

//高扬修改
//从属设备更改色号
watch(
    () => pager.lists,
    (newValue, oldValue) => {
        newValue.map(item => {
            if (item.slave_colour == 3) {
                item.slave_colour = 4;
            }
        });
        for (let i = 0; i < newValue.length; i++) {
            for (let j = 0; j < newValue[i].cate_name.length; j++) {
                if (newValue[i].cate_name[j].id == newValue[i].category_id) {
                    newValue[i].cate_names = newValue[i].cate_name[j].name;
                }
            }
        }
    },
    {
        deep: true,
    }
);

const adminEditing = (val: any) => {
    adminInventoryedit(val).then((data: any) => {
        getLists();
    });
};
const handleAdd = async () => {
    showEdit.value = true;
    await nextTick();
    editRef.value?.open("add");
};
const handleAdds = async () => {
    showTable.value = true;
    await nextTick();
    editRefs.value?.open("add");
};

const handleSee = async (data: any) => {
    showsee.value = true;
    await nextTick();
    showseeRef.value?.open("edit");
    showseeRef.value?.setFormData(data);
};
const onclo = () => {
    showEdit.value = false;
    getOptions();
};
const onfocus = () => {
    userStore.onMouseShow(false);
};
const inputBlur = (val: any) => {
    tableShowbut.value = null;
    adminEditing(val);
};
const tableheight = ref(null);
const heighting = () => {
    tableheight.value = parseInt(document.documentElement.clientHeight) - 185;
};
const getOptions = () => {
    getCommonFieldDisplay({
        type: typeTable.value,
    }).then((data: any) => {
        options.tableTile = data;
    });
    //  仓库列表
    adminUserBind({
        page_type: 0,
    }).then((data: any) => {
        options.listColumn = data;
    });
    admincheckActionPermissions().then((data: any) => {
        options.useJurisdiction = data.type10;
    });
    //   分类列表
    adminListssmaterials({
        page_type: 0,
    }).then((data: any) => {
        options.jczq = data;
    });
};

onMounted(() => {
    //绑定监听事件
    window.addEventListener("resetPage", resetPage);
    heighting();
    getOptions();
    getLists();
    if (pathing.value) {
        if (pathing.value.id) {
            formData.title = pathing.value.id;
        }
        if (pathing.value.ku) {
            formData.warehouse_id = JSON.parse(pathing.value.ku);
        }
        if (pathing.value.type) {
            //李哥添加bug修复
            formData.cate_id = [parseInt(pathing.value.type)];
        }
        resetPage();
    }
});
onUnmounted(() => {
    //销毁事件
    window.removeEventListener("resetPage", resetPage, false);
});
</script>
<style scoped lang="scss"></style>
